<template lang="">
    <ul>
        <li :style={opacity:opacity}>欢迎学习vue</li>
        <li>news001 <input type="text"></li>
        <li>news002 <input type="text"></li>
        <li>news003 <input type="text"></li>
    </ul>
</template>
<script>
export default {
    name:'News',
    data(){
        return{
            opacity:1
        }
    },
/*     mounted() {
        this.pid = setInterval(() => {
            console.log('@')
            this.opacity -= 0.01
            if(this.opacity<0){
                this.opacity = 1
            }
        }, 20);
    }, 
    beforeDestroy(){
        console.log('组件被销毁了')
        clearInterval(this.pid)
    },*/

    activated(){
        console.log('组件被激活了')
        this.pid = setInterval(() => {
            console.log('@')
            this.opacity -= 0.01
            if(this.opacity<0){
                this.opacity = 1
            }
        }, 20);
    },
    deactivated() {
        console.log('组件失活')
        clearInterval(this.pid)
    },
    
}
</script>
<style lang="">
    
</style>